/*eslint-disable*/
import React, { useState, useEffect } from 'react'
import { Table, Space, Button, Modal, Input, message, Switch } from 'antd';
import request from '../../../utils/request'
import Linkage from '../../../components/linkage'
const consult = () => {
    const options1 = [
        {
            value: '开启',
            label: '开启',
        },
        {
            value: '关闭',
            label: '关闭',
        }
    ];
    function onChange(value) {
        console.log(value);
    }

    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '小区名称',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '标题',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '面积',
            dataIndex: 'mianji',
            key: 'mianji',
        },
        {
            title: '总价',
            dataIndex: 'zongjia',
            key: 'zongjia',
        },
        {
            title: '排序',
            dataIndex: 'paixu',
            key: 'paixu',
        },
        {
            title: '状态',
            dataIndex: 'zhuangtai',
            key: 'zhuangtai',
            render: (o, record, index) => {
                return (
                    <Switch defaultChecked={record.status === "1" ? true : false} checkedChildren="开启" unCheckedChildren="关闭" />
                )
            }
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    <a onClick={() => edit(record.id)}>编辑</a>
                    <a onClick={() => del(record.id)}>删除</a>
                </Space>
            ),
        },
    ];
    const [list, setlist] = useState([])
    //弹框开关
    const [isModalVisible, setIsModalVisible] = useState(false);

    //自定义开关
    const [flag, setFlag] = useState(false)
    //输入绑定的内容
    const [title, setTitle] = useState("")//标题自定义数据
    const [name, setName] = useState("")//创建人自定义数据
    const [mianji, setMianji] = useState("")//创建人自定义数据
    // const [data, setData] = useState("")//时间自定义数据


    //搜索绑定的内容
    const [val, setval] = useState("")
    const [one, setone] = useState("")
    const [id, setid] = useState(null)

    //取消键
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //编辑弹框
    const edit = (id) => {
        setFlag(true)
        setIsModalVisible(true)
        setid(id)
        //数据回显
    }

    useEffect(() => {
        getlist()
    }, [])

    const getlist = async () => {
        const res = await request.get('/api/list4')
        setlist([...res.data.data])
    }

    //删除
    const del = async (id) => {
        await request({
            url: "/api/list4del",
            method: "delete",
            params: { id: id }
        })
        getlist()
        message.success("操作成功")
    }

    //添加数据或修改数据
    const handleOk = async () => {
        setIsModalVisible(false);
        await request({
            url: "/api/list4edit",
            method: "post",
            params: {
                name,
                title,
                mianji,
                id
            }
        })
        getlist()
        message.success("操作成功")
    }
    //搜索
    const onSearch = (value) => {
        console.log(value)
        request.post('/api/', { value: value }).then(res => {
            console.log(res);
            // getlist()
        })
    };

    return (
        <div>
            <header>
                审核管理
            </header>
            <div className="div-btn">
                {/* <div>状态<span><Cascader options={options1} onChange={onChange} placeholder="请选择省份" /></span></div>
                <div>状态<span><Cascader options={options1} onChange={onChange} placeholder="请选择城市" /></span></div>
                <div>状态<span><Cascader options={options1} onChange={onChange} placeholder="请选择区县" /></span></div> */}
                <Linkage />
                <div className="inp"><span><input placeholder="请输入经纪人姓名/手机号" onChange={(e) => onSearch(e.target.value)} /></span></div>
                <div><Button >搜索</Button></div>
            </div>
            <div>
                <Table columns={columns} dataSource={list} />
            </div>
            <div>
                <Modal title={flag === false ? "添加" : "编辑"} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} className='addBox'>
                    <p><span>小区名称</span><Input value={name} placeholder="小区名称" onChange={(e) => setName(e.target.value)} /></p>
                    <p><span>标题</span><Input value={title} placeholder="标题" onChange={(e) => setTitle(e.target.value)} /></p>
                    <p><span>面积</span><Input value={mianji} placeholder="面积" onChange={(e) => setMianji(e.target.value)} /></p>
                </Modal>
            </div>
        </div>
    )
}
export default consult
